<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"></style>
    <script src="clipboard.min.js"></script>
</head>
<body>
    <h1>input</h1>
    <hr>

    <input type="text" name="name" id="s">
    
    <hr>
    <br>
    <button onclick="selectAll()">全选</button>
    <button onclick="copyContent()">全选复制</button>
    
    <button class="btn" data-clipboard-target="#content">全选复制(插件clip)</button>

    <br>


    <textarea name="weibo" id="content" cols="100" rows="30">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam cum, impedit eos nesciunt voluptatum possimus rerum dicta quam sint non cupiditate, alias id saepe nulla exercitationem molestiae, inventore quidem sequi minima repellat! Rem labore quaerat adipisci! Inventore delectus mollitia et non. Quaerat debitis eveniet illum ratione, non, esse sapiente repellat harum excepturi provident ut rem eius illo quia delectus vitae dignissimos maiores assumenda! Vero sapiente voluptatum animi. Aspernatur sapiente vel quos praesentium eius commodi laboriosam maxime voluptatibus quae molestiae, nulla, sed a non enim rerum iure tempore ullam adipisci provident inventore cumque optio fuga facilis illo sint! Porro expedita, alias ab similique. Libero alias labore enim velit, consequatur nostrum, beatae sequi aut esse unde laudantium quidem culpa ratione maiores accusamus modi illo a nam magni. Quaerat officiis nulla, quam, ut nemo ullam obcaecati neque vitae porro voluptate mollitia omnis sit, deleniti. Iusto, dolorum dicta, in laborum et deserunt non voluptatibus molestiae nesciunt fugiat doloribus suscipit earum quaerat corrupti culpa, placeat veniam illum! Dolore culpa odio animi quae veritatis laboriosam. Provident eum sed, optio consectetur esse molestias vero in modi sequi, velit alias animi nam eaque. Velit fugiat dolores veritatis est perferendis itaque, sequi quisquam assumenda excepturi magni laboriosam, ad cupiditate quasi repudiandae facere quas id et porro amet dolor consequatur quae voluptas. Vel debitis eos at, esse, labore ad quis qui perferendis iste, tempore beatae voluptas totam omnis natus aliquid, libero iure et placeat culpa dignissimos officiis porro dolorem deserunt magnam. Aut veniam non ducimus beatae animi maiores ratione obcaecati molestiae ipsa porro rerum cumque fugiat, natus quia repellat ut dolorem, quam suscipit quibusdam. Distinctio eveniet repudiandae nobis quae, voluptas quod quaerat, quos adipisci voluptates vitae ea veritatis et modi, nam culpa error facere commodi sit. Pariatur officia nihil, accusamus modi quae maxime! Non iste deserunt ipsam reiciendis nesciunt, distinctio iure mollitia optio placeat ex? Reiciendis at repellat necessitatibus maiores architecto officia, labore, tempora qui debitis ex nesciunt nisi explicabo vero temporibus sapiente vitae eveniet dolor soluta facere excepturi ipsum id saepe, ducimus quos ea. Odit, iure officiis cupiditate minima provident accusamus, dolorem ullam aperiam optio facere, aut accusantium blanditiis illo necessitatibus at vitae consectetur non itaque! Earum quo dolore quae delectus, non nesciunt voluptatum! Incidunt nesciunt numquam, est velit cupiditate, optio. Officia cum cupiditate iure eum ratione temporibus, ut quibusdam et a iste, aspernatur nobis provident! Officia reiciendis esse nobis aut consectetur ipsum corporis reprehenderit sequi explicabo non necessitatibus quos quas delectus, sunt nihil qui quia harum neque totam numquam nemo expedita, error assumenda facere eaque. Saepe reiciendis sit quisquam sint consectetur ad? Inventore fugit dignissimos officia quaerat ducimus quisquam perferendis modi impedit cumque, sunt sequi mollitia veritatis vitae debitis atque ex veniam, quo animi ipsam recusandae, nulla! Asperiores repudiandae nisi debitis dignissimos alias in laudantium culpa quasi ullam ipsum iusto similique est, deleniti cumque neque sequi natus nulla sit cum odit. Et quo, cum aliquid nesciunt fuga eius dicta, vitae! Vitae dolorem eius quidem reprehenderit, fugiat totam assumenda earum explicabo dignissimos corrupti consequatur id expedita, accusantium odio optio.
    </textarea>

    <script>
        // focus() 在文本域上设置焦点。 
        var s = document.getElementById('s');
        s.focus();

        // blur() 从文本域上移开焦点。 
        // select() 选取文本域中的内容。 
        function selectAll() {
            content.select();
        }

        // 全选 复制
        function copyContent() {
            // 判断 剪切板对象 是否可用
            if (window.clipboardData) {
                // 可用
                clipboardData.setData('text', content.value);
                alert('已复制到剪切板!');
            } else {
                // 不可用
                content.select();
                alert('请按 Ctrl + C 复制选中内容..');
            }
        }

        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function (e){
            alert('已通过插件 完成复制');
        });

    </script>



</body>
</html>



